<script lang="ts" setup>
import {
  ElInput,
  ElDatePicker,
  ElButton,
  ElPagination,
  ElMessage,
  ElMessageBox,
} from "element-plus";
import { ref, onMounted } from "vue";
import { getLoginLogList } from "#/api/sys/log";
import dayjs from "dayjs";
import { dateShortcuts } from "#/utils/dateShortcuts";

const time = ref([new Date() - 3600 * 1000 * 24 * 7, new Date()]);

const name = ref("");
let tableData = ref([
  {
    id: 1,
    name: "大理路阳光大厦.3d",
    uploadName: "张三",
    createTime: "2025-08-05 10:00:00",
  },
  {
    id: 1,
    name: "大理路阳光大厦.3d",
    uploadName: "张三",
    createTime: "2025-08-05 10:00:00",
  },
  {
    id: 1,
    name: "大理路阳光大厦.3d",
    uploadName: "张三",
    createTime: "2025-08-05 10:00:00",
  },
  {
    id: 1,
    name: "大理路阳光大厦.3d",
    uploadName: "张三",
    createTime: "2025-08-05 10:00:00",
  },
  {
    id: 1,
    name: "大理路阳光大厦.3d",
    uploadName: "张三",
    createTime: "2025-08-05 10:00:00",
  },
  {
    id: 1,
    name: "大理路阳光大厦.3d",
    uploadName: "张三",
    createTime: "2025-08-05 10:00:00",
  },
]);
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const search = async () => {
  const params = {
    name: name.value,
    startTime: dayjs(time.value[0]).format("YYYY-MM-DD HH:mm:ss")
      ? dayjs(time.value[0]).format("YYYY-MM-DD HH:mm:ss")
      : "",
    endTime: dayjs(time.value[1]).format("YYYY-MM-DD HH:mm:ss")
      ? dayjs(time.value[1]).format("YYYY-MM-DD HH:mm:ss")
      : "",
  };
  //   const { data } = await getLoginLogList(params);
  //   if (data.records.length > 0) {
  //     tableData.value = data.records;
  //     total.value = data.total;
  //   } else {
  //     tableData.value = [];
  //     total.value = 0;
  //   }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  search();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
};

const resetForm = () => {
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  time.value = [
    dayjs(start).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
  ];
  name.value = "";
  currentPage.value = 1;
  search();
};

const uploadItem = () => {
  ElMessage.success("上传成功");
};

const editItem = (item) => {
  ElMessage.success("编辑成功");
};

const delItem = async (item) => {
  try {
    await ElMessageBox.confirm(
      `确定删除二维正射图【${item.name}】吗？`,
      "删除确认",
      {
        type: "warning",
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            try {
              //   await deleteId(item.id);
              done();
            } catch (error) {
              instance.confirmButtonLoading = false;
            }
          } else {
            done();
          }
        },
      }
    );
    ElMessage.success("删除成功");
    // search();
  } catch (error) {
    if (error !== "cancel") {
      ElMessage.error(`删除失败: ${error.message || "未知错误"}`);
      console.error("删除二维正射图失败:", error);
    }
  }
};

onMounted(() => {
  // 设置默认时间为最近一周
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  time.value = [
    dayjs(start).format("YYYY-MM-DD HH:mm:ss"),
    dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
  ];
  //   search();
});
</script>

<template>
  <div class="page">
    <div class="search flex">
      <div class="flex">
        <div>
          <span>素材名称：</span>
          <ElInput
            v-model="name"
            style="width: 240px; margin-right: 20px"
            placeholder="请输入素材名称"
          />
        </div>
        <div>
          <span>选择日期：</span>
          <ElDatePicker
            v-model="time"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="margin: 0 10px"
            :shortcuts="dateShortcuts"
            @change="search()"
          />
        </div>
        <div>
          <ElButton type="primary" @click="search">查询</ElButton>
          <ElButton @click="resetForm">重置</ElButton>
        </div>
      </div>
      <div>
        <ElButton type="primary" @click="uploadItem">上传素材</ElButton>
      </div>
    </div>
    <div class="listPage">
      <div v-for="item in tableData" :key="item" class="item">
        <img src="/static/map6.png" alt="" />
        <h3>{{ item.name }}</h3>
        <p>上传人：{{ item.uploadName }}</p>
        <p style="margin-top: 8px; margin-bottom: 28px">
          上传时间：{{ item.createTime }}
        </p>
        <div class="right-btns">
          <ElButton link type="primary" size="small" @click="editItem(item)"
            >编辑</ElButton
          >
          <ElButton link type="primary" size="small" @click="delItem(item)"
            >删除</ElButton
          >
        </div>
      </div>
    </div>
    <div class="pagination">
      <ElPagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 80, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<style scoped>
.search {
  padding: 9px 0px 20px 0px;
  background: #fff;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item {
  float: left;
  width: 334px;
  height: 383px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-right: 20px;
  margin-bottom: 20px;
}

@media (min-width: 1920px) {
  .item:nth-child(5n) {
    margin-right: 0 !important;
  }
}

img {
  height: 215px;
  width: 334px;
}

h3 {
  font-weight: 500;
  font-size: 16px;
  color: #303133;
  text-align: left;
  margin: 20px 0 16px 12px;
}

p {
  font-weight: 400;
  font-size: 14px;
  color: #909399;
  margin-left: 12px;
}

.right-btns {
  float: right;
  margin-right: 20px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 20px 24px 0px 16px;
  background: #fff;
}
</style>
